<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <div id="title-1">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>
    <div id="seen">
        <span v-if="seen">now you see me</span>
    </div>
    <div id="app-4">
        <ul>
            <li v-for="tood in toods">{{ tood.text }}</li>
        </ul>
    </div>
    <div id="app5">
        <div>{{message}}</div>
        <div>
            <button v-on:click="onClick">clikck</button>
        </div>
    </div>
    <div id="app6">
        {{message}}
        <input type="text" v-model="message">
    </div>
    <ol id="app7">
        <todo-item v-for="todo in items" v-bind:todo="todo"></todo-item>
    </ol>
    <div id="app8">
        <div>{{message}}</div>
        <div>{{reversedMessage}}</div>
    </div>

    <div id="demo">{{ fullName }}</div>

    <div id="app9">
        <span v-for="n in 10">{{ n }}</span>
    </div>

    <div id="example-1">
        <button v-on:click="counter += 1">增加 1</button>
        <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>

    <div id="example-2">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">Greet</button>
    </div>

    <div id="example-3">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>

    <div id="example">
        <my-component></my-component>
    </div>

    <div id="example-2">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
</body>
<script>
    var app = new Vue({
        el : "#app",
        data : {
            message : "hello world"
        }
    });

    var title = new Vue({
        el : "#title-1",
        data : {
            message : "title-1" + new Date()
        }
    });

    var seen = new Vue({
        el : "#seen",
        data : {
            seen : true
        }
    });

    var app4 = new Vue({
        el : "#app-4",
        data : {
            toods: [
                {text: '1111'},
                {text: '2222'},
                {text: '3333'},
            ]
        }

    });

    var app5 = new Vue({
        el : "#app5",
        data : {
            message : "hello vue.js"
        },
        methods :{
            onClick : function(){
                this.message = this.message.split('').reverse().join('');
            }
        }
    });

    var app6 = new Vue({
        el : "#app6",
        data : {
            message : "hello vue.js"
        }
    });

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });
    var app7 = new Vue({
        el : "#app7",
        data :{
            items : [
                {text : '11111'},
                {text : '22222'},
                {text : '33333'}
            ]
        }
    });

    var app8 = new Vue({
        el : "#app8",
        data :{
            message : "hello",
        },
        computed : {
            reversedMessage : function(){
                return this.message.split("").reverse().join("");
            }
        }
    });
    console.log(app8.reversedMessage);

    var app9 = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        }
    });

    var app10 = new Vue({
        el : "#app9"
    });

    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    });

    var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                alert(event.target.tagName)
            }
        }
    })
    // 也可以用 JavaScript 直接调用方法
    //example2.greet() // -> 'Hello Vue.js!'

    var example3 = new Vue({
        el : "#example-3",
        data : {
            checked : true
        }
    });

    // 注册
    Vue.component('my-component', {
        template: '<div>A custom component!</div>'
    })
    // 创建根实例
    new Vue({
        el: '#example'
    })

    var data = { counter: 0 }
    Vue.component('simple-counter', {
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        // data 是一个函数，因此 Vue 不会警告，
        // 但是我们为每一个组件返回了同一个对象引用
        data: function () {
            return data
        }
    })
    new Vue({
        el: '#example-2'

</script>
</html>